<template>
  <div :class="getComponentClass('sh-annex')">
    <template v-for="(item, index) in attachmentData.list" :key="index">
      <annex-big-category
        :big-category-item="item"
        :attachmentConfigs="_attachmentConfigs"
        :beforeUpload="beforeUpload"
        :beforeDelete="beforeDelete"
        @openProview="openProview"
        @uploadSuccess="uploadSuccess"
        @deleteSuccess="deleteSuccess"
      />
    </template>
    <sh-image-preview v-model="showPop" :initialIndex="initialIndex" :previewList="proviewData.list" />
  </div>
</template>

<script setup>
import AnnexBigCategory from './annex-bigCategory';
import { useClass } from '../../utils/useClass';
import { useDependencyInjection } from '../../utils/useDependencyInjection';
import { useAnnex } from './utils/useAnnex';
import { watch, ref, computed } from 'vue';

const { setProvide } = useDependencyInjection();
const { getComponentClass } = useClass();
const emits = defineEmits(['beforeUpload', 'beforeDelete', 'uploadSuccess', 'deleteSuccess']);
const props = defineProps({
  /**
   * @description: 配置
   * showDelete 是否展示删除按钮
   * showUpload 是否展示上传按钮
   * showDown 是否展示下载按钮
   * showTopBar 是否展示顶部操作栏 TODO
   * showStandard  是否展示合格不合格标志
   * showApproveFlag 是否展示审批操作  合格/不合格
   */
  attachmentConfigs: {
    type: Object,
    default: () => ({
      showDelete: false,
      showUpload: false,
      showDown: true,
      showTopBar: false,
      showStandard: false,
      showApproveFlag: false,
      showAllBlank: false,
      showEmptySubclass: true,
    }),
  },
  /**
   * @description: 附件列表
   */
  annexData: {
    type: Array,
    default: () => [],
  },
  /**
   * @description: 上传
   */
  beforeUpload: {
    type: Function,
    default: () => {},
  },
  /**
   * @description: 删除
   */
  beforeDelete: {
    type: Function,
    default: () => {},
  },
});
const {
  attachmentData,
  initAttachmentList,
  openProview,
  fileCurrent,
  showPop,
  closeProview,
  proviewData,
  uploadSuccess,
  deleteSuccess,
} = useAnnex(props, emits);

const _attachmentConfigs = ref({});

watch(
  () => props.attachmentConfigs,
  values => {
    _attachmentConfigs.value = {
      showDelete: false,
      showUpload: false,
      showDown: true,
      showTopBar: false,
      showStandard: false,
      showApproveFlag: false,
      showAllBlank: false,
      showEmptySubclass: true,
      multiple: true,
      ...values,
    };
  },
  {
    deep: true,
    immediate: true,
  }
);

watch(
  () => props.annexData,
  v => {
    initAttachmentList();
  },
  {
    immediate: true,
    deep: true,
  }
);
const initialIndex = computed(() => {
  return proviewData.list.findIndex(item => item.fileId == fileCurrent.value.fileId);
});
setProvide(['attachmentConfigs', 'beforeUpload', 'beforeDelete'], {
  attachmentConfigs: props.attachmentConfigs,
  beforeUpload: props.beforeUpload,
  beforeDelete: props.beforeDelete,
});
</script>

<style scoped lang="less"></style>
